<div id="search-component">
  <label for="search-box">Hero Search</label>
<!--  每当用户在文本框中输入时，这个事件绑定就会使用文本框的值（搜索词）调用 search() 函数。searchTerms 变成了一个能发出搜索词的稳定的流。-->
  <input #searchBox id="search-box" (input)="search(searchBox.value)"/>

  <ul class="search-result">
    <!--    $ 是一个约定，表示 heroes$ 是一个 Observable 而不是数组-->
    <!--    AsyncPipe 管道，它会自动订阅 Observable-->
    <li *ngFor="let hero of heroes$ | async">
      <a routerLink="/detail/{{hero.id}}">
        {{hero.name}}
      </a>
    </li>
  </ul>
</div>
